/**
 * 主题管理工具
 * 提供主题切换、保存、恢复等功能
 */

import { editStyle } from '@/api/theme'
import { useUserStore } from '@/stores/user'

// 可用的主题列表
export const THEMES = [
  {
    id: 1,
    value: 'teal',
    primary: '#009688'
  },
  {
    id: 2,
    value: 'coral',
    primary: '#ff7875'
  },
  {
    id: 3,
    value: 'orange',
    primary: '#f6ad55'
  },
  {
    id: 4,
    value: 'red',
    primary: '#f56c6c'
  },
  {
    id: 5,
    value: 'blue',
    primary: '#3963bc'
  },
  {
    id: 6,
    value: 'green',
    primary: '#36b368'
  },
  {
    id: 7,
    value: 'pink',
    primary: '#ffc0cb'
  },
  {
    id: 8,
    value: 'sky',
    primary: '#409eff'
  },
  {
    id: 9,
    value: 'purple',
    primary: '#9c27b0'
  },
  {
    id: 10,
    value: 'indigo',
    primary: '#6366f1'
  },
  {
    id: 11,
    value: 'cyan',
    primary: '#06b6d4'
  },
  {
    id: 12,
    value: 'emerald',
    primary: '#10b981'
  },
  {
    id: 13,
    value: 'lime',
    primary: '#84cc16'
  },
  {
    id: 14,
    value: 'amber',
    primary: '#f59e0b'
  },
  {
    id: 15,
    value: 'rose',
    primary: '#f43f5e'
  },
  {
    id: 16,
    value: 'slate',
    primary: '#2b333e'
  },
  {
    id: 17,
    value: 'violet',
    primary: '#8b5cf6'
  },
  {
    id: 18,
    value: 'gold',
    primary: '#ffd700'
  },
  {
    id: 19,
    value: 'mint',
    primary: '#00d4aa'
  },
  {
    id: 20,
    value: 'crimson',
    primary: '#dc143c'
  }
]

// 主题映射对象（为了兼容原有代码）
export const THEME_MAP = THEMES.reduce((map, theme) => {
  map[theme.value] = theme
  return map
}, {})

// 默认主题（ID为8的sky主题）
export const DEFAULT_THEME = THEMES[7].value

// 当前主题状态（内存中保存）
let currentThemeState = null

/**
 * 获取当前主题
 * @returns {string} 当前主题名称
 */
export function getCurrentTheme() {
  // 如果已经设置过主题，直接返回当前主题
  if (currentThemeState) {
    return currentThemeState
  }

  try {
    // 尝试从 userStore 获取主题
    const userStore = useUserStore()
    const userStyleId = userStore.employeeInfo?.style

    if (userStyleId) {
      const theme = THEMES.find(t => t.id == userStyleId)
      if (theme) {
        return theme.value
      }
    }
  } catch (error) {
    // 如果 userStore 不可用，使用默认主题
    console.warn('无法从 userStore 获取主题，使用默认主题:', error)
  }

  // 返回默认主题（ID为8的sky主题）
  return THEMES[7].value
}

/**
 * 设置主题
 * @param {string} themeName 主题名称
 * @param {boolean} callApi 是否调用API，默认为true
 * @returns {boolean} 是否设置成功
 */
export async function setTheme(themeName, callApi = true) {
  // 验证主题是否存在
  const themeInfo = THEME_MAP[themeName]
  if (!themeInfo) {
    console.warn(`主题 "${themeName}" 不存在`)
    return false
  }

  try {
    // 如果需要调用API，先调用接口
    if (callApi) {
      await editStyle(themeInfo.id)
    }

    // 获取根元素
    const root = document.documentElement

    // 移除所有主题类
    THEMES.forEach(theme => {
      root.removeAttribute('data-theme')
      root.classList.remove(`theme-${theme.value}`)
    })

    // 设置新主题
    if (themeName !== DEFAULT_THEME) {
      root.setAttribute('data-theme', themeName)
      root.classList.add(`theme-${themeName}`)
    }

    // 更新内存状态
    currentThemeState = themeName

    // 触发主题变更事件
    window.dispatchEvent(new CustomEvent('themeChanged', {
      detail: { theme: themeName, themeInfo: themeInfo }
    }))

    return true

  } catch (error) {
    console.error('设置主题失败:', error)
    return false
  }
}

/**
 * 初始化主题
 * 在应用启动时调用，恢复用户上次选择的主题
 */
export function initTheme() {
  const currentTheme = getCurrentTheme()
  setTheme(currentTheme, false) // 初始化时不调用API
}

/**
 * 根据用户信息初始化主题
 * 在用户登录后调用，根据 userStore.employeeInfo.style 设置主题
 * @param {number} userStyleId 用户的主题ID
 */
export function initThemeFromUser(userStyleId) {
  if (userStyleId) {
    const theme = THEMES.find(t => t.id == userStyleId)
    if (theme) {
      setTheme(theme.value, false) // 初始化时不调用API
      return
    }
  }

  // 如果没有有效的用户主题ID，使用默认主题（sky主题）
  setTheme(THEMES[7].value, false)
}

/**
 * 清除主题状态
 * 在用户退出登录时调用，清除内存中的主题状态
 */
export function clearThemeState() {
  currentThemeState = null

  // 重置为默认主题样式
  const root = document.documentElement
  THEMES.forEach(theme => {
    root.removeAttribute('data-theme')
    root.classList.remove(`theme-${theme.value}`)
  })
}



/**
 * 获取主题信息
 * @param {string} themeName 主题名称
 * @returns {object|null} 主题信息对象
 */
export function getThemeInfo(themeName) {
  return THEME_MAP[themeName] || null
}

/**
 * 获取所有主题列表
 * @returns {array} 主题列表
 */
export function getAllThemes() {
  return THEMES
}

/**
 * 监听主题变更
 * @param {function} callback 回调函数
 * @returns {function} 取消监听的函数
 */
export function onThemeChange(callback) {
  const handler = (event) => {
    callback(event.detail)
  }

  window.addEventListener('themeChanged', handler)

  // 返回取消监听的函数
  return () => {
    window.removeEventListener('themeChanged', handler)
  }
}

/**
 * 获取主题对应的CSS变量值
 * @param {string} variableName CSS变量名（不包含--前缀）
 * @returns {string} CSS变量值
 */
export function getThemeVariable(variableName) {
  const root = document.documentElement
  const computedStyle = getComputedStyle(root)
  return computedStyle.getPropertyValue(`--${variableName}`).trim()
}

/**
 * 动态设置CSS变量
 * @param {string} variableName CSS变量名（不包含--前缀）
 * @param {string} value 变量值
 */
export function setThemeVariable(variableName, value) {
  const root = document.documentElement
  root.style.setProperty(`--${variableName}`, value)
}



/**
 * 获取主题的主色调
 * @param {string} themeName 主题名称，不传则使用当前主题
 * @returns {string} 主色调颜色值
 */
export function getThemePrimaryColor(themeName) {
  const theme = themeName || getCurrentTheme()
  return THEME_MAP[theme]?.primary || THEME_MAP[DEFAULT_THEME].primary
}

/**
 * 根据主题ID设置主题
 * @param {number} themeId 主题ID
 * @param {boolean} callApi 是否调用API，默认为false
 * @returns {boolean} 是否设置成功
 */
export async function setThemeById(themeId, callApi = false) {
  const theme = THEMES.find(t => t.id === themeId)
  if (!theme) {
    console.warn(`主题ID "${themeId}" 不存在`)
    return false
  }
  return await setTheme(theme.value, callApi)
}

/**
 * 根据主题值获取主题ID
 * @param {string} themeName 主题名称
 * @returns {number|null} 主题ID
 */
export function getThemeId(themeName) {
  const theme = THEME_MAP[themeName]
  return theme ? theme.id : null
}




